<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>

<body>
  <!-- flex布局 -->
  <div class="header">
    <div class="header-user">
      <i class="iconfont icon-yonghu"></i>
    </div>
    <div class="header-logo">
      <img src="./img/logo.png" alt="">
    </div>
    <div class="header-email">
      <i class="iconfont icon-youxiang"></i>
      邮箱
      <i class="iconfont icon-down-arrow"></i>
    </div>
  </div>

  <!-- flex布局 -->
  <ul class="nav">
    <li class="nav-item "><a href="#">要闻</a></li>
    <li class="nav-item nav-item-actived"><a href="#">推荐</a></li>
    <li class="nav-item"><a href="#">原创</a></li>
    <li class="nav-item nav-item-actived"><a href="#">热点</a></li>
  </ul>
  <!-- grid布局 -->
  <div class="nav-sub ">
    <ul class="nav-sub-list nav-sub-list__closed ">
      <li class="nav-sub-item">新闻</li>
      <li class="nav-sub-item">抗疫</li>
      <li class="nav-sub-item">娱乐</li>
      <li class="nav-sub-item">体育</li>
      <li class="nav-sub-item">财经</li>
      <li class="nav-sub-item">新闻</li>
      <li class="nav-sub-item">抗疫</li>
      <li class="nav-sub-item">娱乐</li>
    </ul>
    <!-- 绝对定位 -->
    <div class="nav-sub-arrow">
      <i class="iconfont icon-down-arrow"></i>
    </div>
  </div>

  <div class="news">
    <h3 class="news-title">今日要闻</h3>
    <div class="news-content">
      <div class="news-item">
        <div class="news-item-title">习近平再发团结抗疫“中国强音”</div>
        <div class="news-item-info">央视网 1小时 879跟帖</div>
      </div>
      <div class="news-item">
        <div class="news-item-title">这些群众关心事，总书记再次聚焦</div>
        <div class="news-item-info">央视网 1小时 166跟帖</div>
      </div>
      <div class="news-item">
        <div class="news-item-title">这些群众关心事，总书记再次聚焦</div>
        <div class="news-item-img"><img src="./img/news.jpg" alt=""></div>
        <div class="news-item-info">最高人们检察院 1小时 166跟帖</div>
      </div>
    </div>
  </div>

  <div class="news2">
    <div class="news2-item">
      <div class="news2-item-content">
        <h3 class="news2-item-content-title">甘肃马拉松已致20人遇难1人失联 白银市长曾鸣枪开幕</h3>
        <!-- p用了flex布局 -->
        <p class="news2-item-info"><span>上游新闻 2233跟帖 </span> <span class="app">打开APP</span></p>
      </div>
      <div class="news2-item-img"><img src="./img/news2.jpg" alt=""></div>
    </div>
    <div class="news2-item">
      <div class="news2-item-content">
        <h3 class="news2-item-content-title">男子一人保护了52户家庭 有邻居偷偷帮他交1年物业费</h3>
        <p class="news2-item-info"><span>上游新闻 2233跟帖 </span> <span class="app">打开APP</span></p>
      </div>
      <div class="news2-item-img"><img src="./img/news3.jpg" alt=""></div>
    </div>
  </div>
</body>

</html>